<template>
    <div class="xdebug">
        <h1 class="xdebug_title">XDebug</h1>
        <div class="debug_other">
            <div class="debug_box">
                <span class="box_title" style="font-weight: bolder;">&lt;1&gt;&nbsp;&nbsp;VConsole控件</span>
                <span class="box_content" style="height: 80px;">
                    <span v-if="vConsole" @click="openVConsole(false)" class="open_v"> VConsole is open !!</span>
                    <span v-else @click="openVConsole(true)" class="close_v"> VConsole is close !!</span>
                </span>
            </div>
            <div class="debug_box">
                <span class="box_title">&lt;2&gt;&nbsp;&nbsp;是否打开alert</span>
                <span class="box_content">
                    <span v-if="xAlert" @click="openAlert(false)"
                          class="open_third_auth">Alert is open  !!</span>
                    <span v-else @click="openAlert(true)" class="close_third_auth">Alert is close !!</span>
                </span>
            </div>
            <div class="debug_box">
                <span class="box_title">&lt;3&gt;&nbsp;&nbsp;第三方登录 (线上环境慎用！！)</span>
                <span class="box_content">
                    <span v-if="thirdAuth" @click="openThirdAuth(false)"
                          class="open_third_auth">Third auth is open  !!</span>
                    <span v-else @click="openThirdAuth(true)" class="close_third_auth">Third auth is close !!</span>
                </span>
            </div>
            <div class="debug_box">
                <span class="box_title">&lt;4&gt;&nbsp;&nbsp;是否打开微信debug</span>
                <span class="box_content">
                    <span v-if="!wxDebug" @click="showWxDebug(true)" class="open_third_auth">打开WxDebug模式</span>
                    <span v-else @click="showWxDebug(false)" class="close_third_auth">关闭WxDebug模式</span>
                </span>
            </div>
            <div class="debug_box">
                <span class="box_title">&lt;5&gt;&nbsp;&nbsp;Android机清理缓存</span>
                <span class="box_content">
                    <span @click="openX5" class="android_x5"> ==> Android手机X5调试页面</span>
                    <span class="android_x5_copy" @click="clickCopy('http://debugx5.qq.com')">
                        ( 打不开？点击复制 => http://debugx5.qq.com )
                    </span>
                </span>
            </div>
            <div class="debug_box">
                <span class="box_title">&lt;6&gt;&nbsp;&nbsp;临时方法</span>
                <span class="box_content">
                    <span @click="excuteTemp" class="open_third_auth">臨時使用  !!</span>
                </span>
            </div>
            <div class="debug_box">
                <span class="box_title">&lt;7&gt;&nbsp;&nbsp;清除页面cookie</span>
                <span class="box_content">
                    <span v-if="!clearCookie" @click="clearAllCookie" class="open_third_auth">清除页面cookie</span>
                    <span v-else class="close_third_auth">页面cookie已清除！！</span>
                </span>
            </div>
            <div class="debug_box">
                <span class="box_title">&lt;8&gt;&nbsp;&nbsp;是否清除页面localStorage</span>
                <span class="box_content">
                    <span v-if="!clearAllLocalStorage" @click="clearLocalStorage" class="open_third_auth">清除页面localStorage</span>
                    <span v-else class="close_third_auth">页面localStorage已清除！！</span>
                </span>
            </div>
        </div>
    </div>
</template>

<script>
    import XCookie from './XCookie'

    export default {
        name: "XDebug",
        data() {
            return {
                vConsole: false,
                thirdAuth: true,
                xAlert: false,
                clearCookie:false,
                clearAllLocalStorage:false,
                wxDebug:false,
            }
        },
        created() {
            this.vConsole = XCookie.isOpenVConsole()
            this.thirdAuth = XCookie.isOpenThirdAuth()
            this.xAlert = XCookie.isOpenAlert()
            this.wxDebug = XCookie.isOpenWxDebug()
        },
        methods: {
            openVConsole(open) {
                XCookie.openVConsole(open)
                this.vConsole = XCookie.isOpenVConsole()
            },
            openAlert(open) {
                XCookie.openAlert(open)
                this.xAlert = XCookie.isOpenAlert()
            },
            openThirdAuth(open) {
                XCookie.openThirdAuth(open)
                this.thirdAuth = XCookie.isOpenThirdAuth()
            },
            //打开/关闭wxdebug模式
            showWxDebug(boolean){
                XCookie.isOpenWxDebug(boolean)
                this.wxDebug = XCookie.isOpenWxDebug()
            },
            openX5() {
                window.location.href = "http://debugx5.qq.com"
            },
            clearAllCookie(){
                var date=new Date();
                date.setTime(date.getTime()-10000);
                var keys=document.cookie.match(/[^ =;]+(?=\=)/g);
                if (keys) {
                    for (var i =  keys.length; i--;)
                        document.cookie=keys[i]+"=0; expire="+date.toGMTString()+"; path=/";
                }
                this.msg = "已经清除了所有cookie";
                this.clearCookie = true;
            },
            clearLocalStorage(){
                window.localStorage.clear();
                XCookie.openThirdAuth(true);
                XCookie.openVConsole(false);
                this.msg = "页面缓存已清理";
                this.clearAllLocalStorage = true;
            },
            //点击复制
            clickCopy(text) {
                let input = document.createElement('input')
                document.body.appendChild(input)
                input.setAttribute('value', text)
                input.select()
                if (document.execCommand('copy')) {
                    document.execCommand('copy')
                }
                document.body.removeChild(input)
                alert('复制成功 ！')
            },
            //執行临时，根据调试所需配置
            excuteTemp() {
               let WechatOpenId = "cF6HQCd643H55e23FddHihid_nw";
               // localStorage.removeItem(WechatOpenId)
               localStorage.setItem(WechatOpenId,"ghDebug");
               alert("临时清理WechatOpenId成功！！");

                // let userLocationKey = '2DKuser893skaDffloddscation10443'
                // let userLocationCache = {
                //     longitude: 106.6113281,
                //     latitude: 40.513799,
                //     refreshTime: Date.parse(new Date())
                // }
                // window.localStorage.setItem(userLocationKey, window.encodeURIComponent(JSON.stringify(userLocationCache)))
            }
        }
    }
</script>

<style scoped>
    .xdebug {
        width: 100%;
        text-align: center;
        margin-top: 30px;
    }

    .xdebug_title {
        width: 100%;
        text-align: center;
        font-family: "Courier New", Courier, monospace;
        color: #0d75ad;
        font-weight: bolder;
    }

    .open_v {
        width: 100%;
        color: #2db7b5;
        font-size: 26px;
        font-weight: bolder;
        line-height: 50px;
    }

    .close_v {
        width: 100%;
        color: red;
        font-size: 26px;
        font-weight: bolder;
        line-height: 50px;
    }

    .open_third_auth {
        color: #2db7b5;
        font-weight: bolder;
    }

    .close_third_auth {
        color: red;
        font-weight: bolder;
    }

    .android_x5 {
        float: left;
        width: 100%;
        height: 20px;
        text-decoration: underline;
    }

    .android_x5_copy {
        float: left;
        width: 100%;
        height: 20px;
        margin-top: 15px;
        color: #666666;
        text-decoration: underline;
    }

    .debug_other {
        width: 100%;
        height: auto;
        text-align: left;
    }

    .debug_box {
        width: 93%;
        height: 30px;
        margin-top: 20px;
        margin-left: 7%;
        line-height: 30px;
    }

    .box_title {
        float: left;
        width: 100%;
        height: 50px;
        color: rgba(11, 8, 23, 0.59);
    }

    .box_content {
        float: left;
        width: 100%;
        margin-left: 10%;
        height: 50px;
    }
</style>

